<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>账单详情</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="css/comments.css" media="all">
    <link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/goods.css">
    <style>
        .layui-form-label{
            width: 130px;
        }
        .layui-input-block{
            margin-left: 160px;
        }
        .payRecordFilesDiv,.payRecordFilesDiv1,#selectTable,.table_total{
            display: none;
        }
        .table_total{
            text-align: right;
        }
		
		.imgdiv{
		    /* width: 200px;
		    height: 300px; */
		    overflow: hidden;
		    background: #fff;
		}
		.imgdiv img{
		    width: 100%;
		    height: 100%;
		    object-fit: contain;
		}
		/* 支付凭证 */
		.addFile{
		    width: 100px;
		    height: 30px;
		    border-radius: 4px;
		    border: 1px dashed #e6e6e6;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    cursor: pointer;
		    color: #666;
		    font-size: 12px;
			margin-top:20px;
		}
		.addFile:hover {
		    border: 1px dashed #f58843;
		    background: linear-gradient(316deg,#f58843 0%,#f56643 100%);;
		    color: #fff;
		}
		.addFile:hover i {
		    color: #fff;
		}
		.addFile i {
		    font-size: 14px;
		    color: #f5dab0;
		    margin-right: 5px;
		}
		.fileList li{
			color:#03A9F4;
		}
		.fileUpLoadName{
			cursor: pointer;
		}
		.fileUpLoadView{
		    cursor: pointer;
		    margin-left:10px;
		    color:#9F9F9F;
		}
		.fileUpLoadView:hover{
			color:#f56643;
		}
		
        /* .imgdiv{
            width: 200px;
            height: 300px;
            overflow: hidden;
            background: #fff;
        }
        .imgdiv img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .addFile{
            width: 200px;
            height: 300px;
            border-radius: 4px;
            border: 1px dashed #e6e6e6;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #666;
            font-size: 12px;
        }
        .addFile:hover {
            color: #f58843;
        }
        .addFile:hover i {
            color: #f58843;
        }
        .addFile i {
            font-size: 14px;
            color: #f5dab0;
            margin-right: 5px;
        }
        .addFileImg{
            width: 200px;
            height: 300px;
            border-radius: 4px;
            border: 1px dashed #e6e6e6;
            cursor: pointer;
            overflow: hidden;
            display: none;
        }
        .addFileImg img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .getBillBtn{
            display: none;
        }
        .modifyFile {
            width: 100px;
            height: 30px;
            border-radius: 4px;
            border: 1px dashed #e6e6e6;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #666;
            font-size: 12px;
            margin-bottom: 16px;
        }
        .modifyFile:hover {
            border: 1px dashed #f58843;
            background: linear-gradient(316deg,#f58843 0%,#f56643 100%);;
            color: #fff;
        }
        .modifyFile:hover i {
            color: #fff;
        } */
    </style>
</head>
<body>
    <div class="maincontainer">
        <blockquote class="layui-elem-quote">
            <span class="block_title"></span>
            <button type="button" class="layui-btn layui-btn-sm" style="float: right;margin-top: -4px;" onclick="window.history.back();">返回</button>
        </blockquote>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">账单编号：</label>
                <div class="layui-form-mid layui-word-aux billNo"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">餐饮总公司：</label>
                <div class="layui-form-mid layui-word-aux foodManagerName"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">订单内容：</label>
                <div class="layui-input-block table">
                    <table class="layui-hide" id="selectTable" lay-filter="selectTable"></table>
                    <div class="table_total">合计：</div>
                </div>
            </div>
			<div class="layui-form-item payRecordFilesDiv">
			 	<label class="layui-form-label">支付凭证：</label>
			 	<div class="layui-input-inline">
			 		<div class="imgList">
			 			<ul class="mainpicture">
			 				<li class="showDImg1">
			
			 				</li>
			 			</ul>
			 		</div>
			 	</div>
			</div>
			<!-- <div class="layui-form-item" style="margin-bottom: 0;">
			    <label class="layui-form-label">支付凭证：</label>
			    <div class="layui-form-mid layui-word-aux">注：只可上传PDF或图片</div>
			</div>
			<div class="layui-form-item">
			    <div class="layui-input-block">
			        <div>
						<ul class="fileList">
							
						</ul>
			        </div>
			    </div>
			</div> -->
            <!-- <div class="layui-form-item payRecordFilesDiv">
                <label class="layui-form-label">支付凭证：</label>
                <div class="layui-input-block">
                    <div class="mainpicture">
                        <div class="getBillBtn">
                            <input type="file" accept="image/*" id="modifyFile" multiple style="display: none;" name="">
                            <label class="modifyFile" for="modifyFile">
                                <i class="fa fa-cloud-upload"></i>修改
                            </label>
                        </div>
                        <div class="showMImg">

                        </div>
                    </div>
                </div>
            </div> -->
            <div class="layui-form-item btnDiv">
            </div>
        </form>
    </div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container toolbarDemo">
        <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="export" type="button">导出订单</button>
    </div>
</script>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>

    layui.config({
        base: 'plugins/layui/modules/',
    }).use(['http', 'form', 'laydate', 'table'], function() {
        var http = layui.http,
            form = layui.form,
            laydate = layui.laydate,
            table = layui.table;

        var id = http.getPid('id')
        var imgFile
        
        init()
        function init(){
            http.get('food/manager/order/bill/findById/foodManager',{
                id: id
            },function(res){
                if(res.code == 200){
                    var data = res.data
                    $('.block_title').html('账单详情'+(data.status==1?' - 待结账':(data.status==2?' - 已付款待确认':(data.status==3?' - 已完成':''))))
                    
                    if(data.status == 2){
                        $('.getBillBtn').show()
                    }

                    $('.billNo').html(data.billNo)
                    $('.foodManagerName').html(data.foodManagerName)

                    var selectTable = http.table1({
                        elem: '#selectTable',
                        id: 'selectTable',
                        toolbar: '#toolbarDemo',
                        cols: [[
                            {field:'shopOrderNo', title: '订单编号', align : 'center',
                                templet: function(d){
                                    var html = ''
                                    html += '<a class="buttoncolor" href="orderInfo.html?id='+d.shopOrderNo+'">'+d.shopOrderNo+'</a>'
                                    return html
                                }
                            },
                            {field:'supplierName', title: '供应商名称', align : 'center'},
                            {field:'canteenName', title: '食堂名称', align : 'center',totalRow: true},
                            {field:'orderTotalMoney', title: '订单金额', align : 'center'},
                            {field:'goodCount', title: '商品数量', align : 'center'},
                            {field:'createTime', title: '下单时间', align : 'center'}
                        ]],
                        data: data.billInfoSingleOrderListVoList
                    })
                    
                    var sum = 0
                    for(var p=0;p<data.billInfoSingleOrderListVoList.length;p++){
                        sum += data.billInfoSingleOrderListVoList[p].orderTotalMoney
                    }
                    $('.table_total').html('合计：<span style="color: #fbaf7e">￥'+sum.toFixed(2)+'</span>')
					
					// 支付凭证
					// var payRecordFiles = JSON.parse(data.payRecordFiles);
     //                if(payRecordFiles && payRecordFiles.length>0){ 
					// 	for(var i=0;i<payRecordFiles.length;i++){
					// 		var html = '<li><span data-url="'+payRecordFiles[i].file+'" class="fileUpLoadName">'+payRecordFiles[i].filename+'</span></li>';
					// 		$('.fileList').append(html);
					// 	}
     //                }
					var smallPic = JSON.parse(data.payRecordFiles);
					if(smallPic && smallPic.length>0){
						$('.payRecordFilesDiv').show()
						var imghtml = '';
						for(var i=0;i<smallPic.length;i++){
							imghtml += '<div class="imgdiv">'+
											'<img src="'+(TUrl+smallPic[i])+'" onclick="onShowImg(\''+smallPic[i]+'\')">'+
										'</div>';
						}
						$('.showDImg1').html(imghtml);
					}
					
					
                    window.onShowImg = function(img) {
                        http.photos('<div style="text-align:center;width:450px;height:450px;overflow:hidden;"><img src="' + TUrl+img + '" style="width:100%;height:100%;object-fit: contain"/></div>')
                    }
                    // else if(type==2){
                    //     $('.payRecordFilesDiv1').show()
                    // }
                    
                    // table的toolbar
                    table.on('toolbar(selectTable)', function (obj) {
                        if(obj.event=='export'){ // 导出
                            var param = {
                                id: id,
                                authentication: localStorage.getItem('xi-head-authentication')
                            }
                            if (param) {  
                                let paramsArray = [];  
                                //encodeURIComponent  
                                Object.keys(param).forEach(key => paramsArray.push(key + '=' + param[key]))  
                                window.open(TUrl+"food/manager/order/bill/exportInfo/foodManager?"+paramsArray.join('&'))
                            }
                        }
                    })
                }else{
                    layer.msg(res.msg)
                }
            })
        }
		
		// 预览
		$(document).on('click','.fileUpLoadName',function(e){
			var url = e.target.dataset.url
		    window.open(TUrl+url)
		})
		/* // 删除
		$(document).on('click','.fileUpLoadView',function(e){
			$(this).parent().remove()
			onupdateOrderBillPayRecordFile();
		})
		
		// 支付凭证
		$('#fileUpLoad').on('change', function () {
			var newFlieArr = [];
			var formData = new FormData();			        
		    var files = this.files;
			if(!files||files.length==0){
				return
			}
			var ifGo = true;
			for(var i=0;i<files.length;i++){
				var newFlie = {};
				var file = files[i];
				newFlie.filename = file.name;        //文件名
				fileext = http.getLaName(file.name);
				if(!http.isAssetType(fileext)){
					ifGo = false
				    layer.msg('只可上传PDF或图片')
					break
				}
                if(!http.verificationPicFile(file,20)){ // 大小判断
                    ifGo = false
                    break
                }
				newFlieArr.push(newFlie);
				formData.append("files", files[i]);
			}
			formData.append("isfileName", false);
			formData.append("fileType", "file");
			if(ifGo){
				http.upLoad('system/file/upload/batch',formData,function(res){
				    if(res.code == 200){
						var dataList = res.data;
						for(var i=0;i<dataList.length;i++){
							newFlieArr[i].file = dataList[i];
							var html = '<li><span data-url="'+newFlieArr[i].file+'" class="fileUpLoadName">'+newFlieArr[i].filename+'</span><span class="fileUpLoadView">删除</span></li>';
							$('.fileList').append(html);
						}
						onupdateOrderBillPayRecordFile();
				    }else{
				        layer.msg(res.msg)
				    }
				})  
			}else{
			}
		})
		
		// 更新凭证
		function onupdateOrderBillPayRecordFile() {
			var imgFile = [];
			$(".fileList").find("li").each(function(){
				var list = {
					file:$(this).find("span").eq(0)[0].dataset.url,
					filename:$(this).find("span").eq(0).html()
				};
				imgFile.push(list);
			});
		    http.post('food/manager/order/bill/updateOrderBillPayRecordFile',{
		        id: id,
		        payRecordFiles: JSON.stringify(imgFile)
		    },function(res) {
		        if(res.code == 200){
		            layer.msg('操作成功')
		        }else{
		            layer.msg(res.msg)
		        }
		
		    })
		} */

    })
</script>
</body>
</html>